<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/statics/layui/css/layui.css">
</head>
<body>

<!-- 查询条件 -->
<div class="layui-fluid" >
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
        
        
          <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" id="titleId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
        
          <div class="layui-inline">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
              <input type="text" name="author" id="authorId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          
          
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" id="searchBtn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
   </div>
</div>     

<script type="text/html" id="headToolBar">
  <a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">批量删除</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="push">发布</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">取消发布</a>
</script>

<script type="text/html" id="rowToolBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	
	<table id="tableId" lay-filter="dataTable"></table>
	
	
<script src="${path}/statics/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['laydate', 'laypage','element','jquery','layer','upload',"table"], function(){
  var element = layui.element;
  var $ = layui.jquery;
  var layer = layui.layer;
  var upload = layui.upload;
  var table = layui.table;
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
 
  
  
  //点击查询按钮的处理事件
  $("#searchBtn").click(function(){
	 // alert();
	 
	 //重新加载表格,额外传递参数
	table.reload('tableId', {
 	    where: { //设定异步数据接口的额外参数，任意设
 	    	title: $("#titleId").val()
    	,author: $("#authorId").val()
    	//…
  	}
  	,page: {
  	   curr: 1 //重新从第 1 页开始
    }
	}); //只重载数据
	  
  });
  

  var active= {
  		  //重新加载表格数据,还是异步请求
  		  reloadTable:function(){
  			  table.reload('tableId', {
  				  page: {
  				    curr: 1 //重新从第 1 页开始
  				  }
  				}); //只重载数据
  		  },
  		  
  		  //删除数据
  		  deleteArticle:function(ids){
  			layer.confirm('真的删除行么', function(index){
  	    	    
  		        //obj.del(); //删除对应行（tr）的DOM结构
  		        layer.close(index);
  		        //向服务端发送删除指令
  		         //向服务端发送删除指令
  	     	        $.post("${path}/articleCtl/delete",{ids:ids},function(res){
  	     	        	
  	     	        	//返回状态码
  	     	        	if(res == 0){
  	     	        		layer.msg("删除成功",{icon:1},function(){
  	     	        			//因为在父级页面,所以不用parent.tools.function()
  	     	        			active.reloadTable();	
  	     	        		})
  	     	        	}else{
  	     	        		layer.msg("删除失败",{icon:5});
  	     	        	}
  	     	        	
  	     	        });
  		        
  	      });
  		  },
  		  
	  		  
	  		 //发布与取消发布
	  		  pushAndCancel:function(status,data){
		  			//获取选中的行数的id值
		          	var ids = "";
		          	for(var i=0;i<data.length;i++){
		          		if (status == 1 && data[i].STATUS == "未发布"){
		          			ids += data[i].id + ",";
		          		}
		          		if (status == 0 && data[i].STATUS == "已发布"){
		          			ids += data[i].id + ",";
		          		}
		          	}
  	     	        $.post("${path}/articleCtl/pushAndCancel",{ids:ids,status:status},function(res){
  	     	        	
  	     	        	//返回状态码
  	     	        	if(res == 0){
  	     	        		layer.msg("操作成功",{icon:1},function(){
  	     	        			//因为在父级页面,所以不用parent.tools.function()
  	     	        			active.reloadTable();	
  	     	        		})
  	     	        	}else{
  	     	        		layer.msg("已完成操作,请不要重复操作",{icon:4});
  	     	        	}
  	     	        	
  	     	       });
  		        
  		  	}
  		  
  		  
  }

  window.tools = active;
  
  //第一个实例
  table.render({
    elem: '#tableId'
    ,url: '${path}/articleCtl/list' //数据接口
    ,page: true //开启分页
    ,toolbar:'#headToolBar'
    ,page:true
    ,limit: 5
    ,limits:[5,10,20,30,40,50,60]
    ,initSort:{
    	field: 'oper_time' //排序字段
    	,type: 'desc'
    }
    ,cols: [[ //表头
    	//{type: 'number', fixed: 'left'}
      ,{type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID' ,sort:true ,width :60}
      ,{field: 'title', title: '标题' ,sort:true,width :120}
      ,{field: 'author', title: '作者' ,width :60,align:'center',unresize:true}
      
      ,{field: 'type_name', title: '种类' ,align:'center',width :120}
      ,{field: 'STATUS', title: '状态',sort:true,width :85,align:'center'}
      ,{field: 'oper_user', title: '操作员',width :80,align:'center'}
      ,{field: 'oper_time', title: '操作时间',align:'center',width :120,sort:true,templet:function(row){
    	  //row表示当前行数据
    	  var date = new Date(row.oper_time);
    	  return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
      }}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#rowToolBar'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(dataTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
    	  var indexAdd = layer.open({
    		   type: 2
    		  ,content: '${path}/articleCtl/toAdd'
    		  ,title: "编辑文章"
    		  ,skin: "layui-layer-molv"
    		  ,area: ['1100px', '900px']
    		  ,maxmin: true
    		  //,area: 
    		  //,closeBtn: 1
    		  ,btnAlign: 'r'
    		  ,anim: 1
    	  });
       // layer.msg('添加');
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请至少选择一行');
        } else {
        	
        	//获取选中的行数的id值
        	var ids = "";
        	for(var i=0;i<data.length;i++){
        		ids += data[i].id + ","
        	}
        	 active.deleteArticle(ids);
        }
      break;
      case 'push':
          if(data.length === 0){
            layer.msg('请至少选择一行');
          } else {
         	active.pushAndCancel(1,data);
          }
        break;
      case 'cancel':
          if(data.length === 0){
            layer.msg('请至少选择一行');
          } else {
        	  active.pushAndCancel(0,data);
          }
        break;
      
    };
  });
  
  
  //监听行工具事件
  table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var rowData = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      
    	active.deleteArticle(rowData.id);
    	
    	
    	
    } else if(layEvent === 'edit'){
      	//layer.msg('编辑操作');
    	layer.open({
 		   type: 2
 		  ,content: '${path}/articleCtl/toUpdate?id='+rowData.id
 		  ,title: "编辑用户"
 		  ,skin: "layui-layer-molv"
 		  ,area: ['800px', '600px']
 		  ,maxmin: true
 		  //,area: 
 		  //,closeBtn: 1
 		  ,btnAlign: 'r'
 		  ,anim: 1
 	  });
    }
  });
  
 
  
});


</script>



</body>
</html>